@{
    var viewModel = Model.ViewModel as DataTableDataViewModel ?? new DataTableDataViewModel();

    var columns = viewModel.ColumnsDefinition?.Columns ?? Enumerable.Empty<DataTableColumnDefinition>();
    var dataTableId = viewModel.DataTableId ?? $"datatable_{Guid.NewGuid():N}";

    const string headerElementName = ElementNames.DataTableElementName + "__header";
    const string headerRowElementName = ElementNames.DataTableElementName + "__headerRow";
    const string headerCellElementName = ElementNames.DataTableElementName + "__headerCell";
    const string bodyElementName = ElementNames.DataTableElementName + "__body";
    const string cellElementName = ElementNames.DataTableElementName + "__cell";
    const string toggleChildRowCellElementName = ElementNames.DataTableElementName + "__toggleChildRowCell";
}

@*
    "width=100%" is required to force the DataTables plugin to stretch the table.
    See: https://datatables.net/examples/basic_init/flexible_width.html
*@
<table id="@dataTableId" class="@ElementNames.DataTableElementName row-border stripe table data-table" width="100%">
    <thead class="@headerElementName">
        <tr class="@headerRowElementName">
            @if (viewModel.ChildRowsEnabled)
            {
                <th class="@headerCellElementName" data-class-name="@toggleChildRowCellElementName" scope="col"></th>
            }

            @foreach (var column in columns)
            {
                <th class="@headerCellElementName"
                    data-class-name="@cellElementName"
                    data-orderable="@Json.Serialize(column.Orderable)"
                    scope="col"
                    @if (!string.IsNullOrEmpty(column.Name)) { <text> data-name="@column.Name" data-data="@column.Name" </text> }>
                    @column.Text
                </th>
            }
        </tr>
    </thead>
    <tbody class="@bodyElementName">
        @if (viewModel.Rows != null)
        {
            foreach (var row in viewModel.Rows)
            {
                <tr class="@ElementNames.DataTableRowElementName">
                    @foreach (var cell in row)
                    {
                        <td class="@cellElementName">
                            @Html.Raw(cell)
                        </td>
                    }
                </tr>
            }
        }
    </tbody>
</table>
